<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li class="c1">第1个</li>
        <li>第2个</li>
        <li id="i1">第3个</li>
        <li>第4个</li>
        <li class="c1">第5个</li>
    </ul>
    <ol>
        <li>ol 1个</li>
        <li>ol 2个</li>
        <li>ol 3个</li>
        <li>ol 4个</li>
        <li>ol 5个</li>
    </ol>
    <script>
        /* 通过querySelector来进行获取 */
        // console.log(document.querySelector("li")); //获取那一堆li当中的第一个
        // console.log(document.querySelector("li:nth-child(3)")); //获取li标签当中第三个
        // console.log(document.querySelector("#i1")); //获取id
        // console.log(document.querySelector(".c1")); //获取id

        /* 通过querySelectorAll("选择器") */
        console.log(document.querySelectorAll(".c1")); //获取类样式为c1
        console.log(document.querySelectorAll("ol > li")); //获取ol下的所有li
        console.log(document.querySelectorAll("ul>li:nth-child(2),ol>li:nth-child(3)"));//获取ul下的li第2个,ol下的li的第3个
    </script>
</body>

</html>